<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>路由实例</title>
    </head>

    <body>
        <div id="app">
            <p>
                <!-- 使用router-link组件导航 to属性指定导航地址 -->
                <router-link to="/home">home</router-link><br>
                <router-link to="/new">news</router-link>
            </p>
            <!-- 路由出口（路由匹配到的组件将被渲染到这里） -->
            <router-view></router-view>
        </div>

        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/vue-router@4.0.6"></script>
        <script>
            // 1.定义路由组件
            const Home = {
                template:'<div>首页</div>'
            }
            const News = {
                template:'<div>新闻</div>'
            }
            // 2.定义路由规则对象，每个路由只能映射一个组件
            const routes = [
            {
                path:'/home',
                component:Home
            },
            {
                path:'/news',
                component:News
            }
        ]
        // 3.创建router实例
        const router = VueRouter.createRouter({
            // 配置路由模型：有两种
            /*
                createWebHistory:路径中不带#
                createWebHashHistory:路径中带#
            */
            history:VueRouter.createWebHashHistory(),
            routes:routes
        })

        Vue.createApp({
        }).use(router).mount('app')
        </script>
    </body>
</html>
